<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>爱家-房源</title>
    <link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/reset.css" rel="stylesheet">
    <link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="/static/css/ihome/main.css" rel="stylesheet">
    <link href="/static/css/ihome/search.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="top-bar">
            <div class="nav-bar">
                <h3 class="page-title">房 源</h3>
                <a class="nav-btn fl" href="/"><span><i class="fa fa-angle-left fa-2x"></i></span></a>
            </div>
            <ul class="filter-title-bar">
                <li class="filter-title">
                    <span>入住日期</span>
                    <span><i class="fa fa-angle-down"></i></span>
                    <span class="split-line fr">|</span>
                </li>
                <li class="filter-title">
                    <span>位置区域</span>
                    <span><i class="fa fa-angle-down"></i></span>
                    <span class="split-line fr">|</span>
                </li>
                <li class="filter-title">
                    <span>最新上线</span>
                    <span><i class="fa fa-angle-down"></i></span>
                </li>
            </ul>
            <div class="filter-item-bar">
                <div class="filter-item filter-date">
                    <div class="input-daterange input-group">
                        <input type="text" class="input-sm form-control" id="start-date" />
                        <span class="input-group-addon">至</span>
                        <input type="text" class="input-sm form-control" id="end-date" />
                    </div>
                </div>
                <ul class="filter-item filter-area"></ul>
                <ul class="filter-item filter-sort">
                    <li class="active" sort-key="new">最新上线</li>
                    <li sort-key="booking">入住最多</li>
                    <li sort-key="price-inc">价格 低-高</li>
                    <li sort-key="price-des">价格 高-低</li>
                </ul>
            </div>
        </div>
        <div class="display-mask"></div>
        <ul class="house-list">

        </ul>
        <script id="house-list-tmpl" type="text/html">
            {{each houses}}
            <li class="house-item">
                <a href="/detail.html?id={{$value.house_id}}"><img src="{{$value.img_url}}"></a>
                <div class="house-desc">
                    <div class="landlord-pic"><img src="{{$value.user_avatar}}"></div>
                    <div class="house-price">￥<span>{{$value.price}}</span>/晚</div>
                    <div class="house-intro">
                        <span class="house-title">{{$value.title}}</span>
                        <em>出租{{$value.room_count}}间 - {{$value.order_count}}次入住 - {{$value.address}}</em>
                    </div>
                </div>
            </li>
            {{/each}}
        </script>
        <div class="footer">
            <p><span><i class="fa fa-copyright"></i></span>爱家租房&nbsp;&nbsp;享受家的温馨</p>
        </div>
    </div>

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="/static/js/template.js"></script>
    <script>
        var cur_page = 1; // 当前页
        var next_page = 1; // 下一页
        var total_page = 1;  // 总页数
        var house_data_querying = true;   // 是否正在向后台获取数据

        // 解析url中的查询字符串
        function decodeQuery() {
            var search = decodeURI(document.location.search);
            return search.replace(/(^\?)/, '').split('&').reduce(function (result, item) {
                values = item.split('=');
                result[values[0]] = values[1];
                return result;
            }, {});
        }

        // 更新用户点选的筛选条件
        function updateFilterDateDisplay() {
            var startDate = $("#start-date").val();
            var endDate = $("#end-date").val();
            var $filterDateTitle = $(".filter-title-bar>.filter-title").eq(0).children("span").eq(0);
            if (startDate) {
                var text = startDate.substr(5) + "/" + endDate.substr(5);
                $filterDateTitle.html(text);
            } else {
                $filterDateTitle.html("入住日期");
            }
        }


        // 更新房源列表信息
        // action表示从后端请求的数据在前端的展示方式
        // 默认采用追加方式
        // action=renew 代表页面数据清空从新展示
        function updateHouseData(action) {
            var areaId = $(".filter-area>li.active").attr("area-id");
            if (undefined == areaId) areaId = "";
            var startDate = $("#start-date").val();
            var endDate = $("#end-date").val();
            var sortKey = $(".filter-sort>li.active").attr("sort-key");
            var params = {
                aid: areaId,
                sd: startDate,
                ed: endDate,
                sk: sortKey,
                p: next_page
            };
            $.get("/api/v1/houses", params, function (resp) {
                house_data_querying = false;
                if ("0" == resp.errno) {
                    if (0 == resp.data.total_page) {
                        $(".house-list").html("<p style='text-align:center;line-height:100px;'>暂时没有符合您查询的房屋信息。</p>");
                    } else {
                        total_page = resp.data.total_page;
                        if ("renew" == action) {
                            cur_page = 1;
                            $(".house-list").html(template("house-list-tmpl", { houses: resp.data.houses }));
                        } else {
                            cur_page = next_page;
                            $(".house-list").append(template("house-list-tmpl", { houses: resp.data.houses }));
                        }
                    }
                }
            })
        }

        $(document).ready(function () {
            var queryData = decodeQuery();
            var startDate = queryData["sd"];
            var endDate = queryData["ed"];
            $("#start-date").val(startDate);
            $("#end-date").val(endDate);
            updateFilterDateDisplay();
            var areaName = queryData["aname"];
            if (!areaName) areaName = "位置区域";
            $(".filter-title-bar>.filter-title").eq(1).children("span").eq(0).html(areaName);


            // 获取筛选条件中的城市区域信息
            $.get("/api/v1/areas", function (data) {
                if ("0" == data.errno) {
                    // 用户从首页跳转到这个搜索页面时可能选择了城区，所以尝试从url的查询字符串参数中提取用户选择的城区
                    var areaId = queryData["aid"];
                    // 如果提取到了城区id的数据
                    if (areaId) {
                        // 遍历从后端获取到的城区信息，添加到页面中
                        for (var i = 0; i < data.data.length; i++) {
                            // 对于从url查询字符串参数中拿到的城区，在页面中做高亮展示
                            // 后端获取到城区id是整型，从url参数中获取到的是字符串类型，所以将url参数中获取到的转换为整型，再进行对比
                            areaId = parseInt(areaId);
                            if (data.data[i].id == areaId) {
                                $(".filter-area").append('<li area-id="' + data.data[i].id + '" class="active">' + data.data[i].name + '</li>');
                            } else {
                                $(".filter-area").append('<li area-id="' + data.data[i].id + '">' + data.data[i].name + '</li>');
                            }
                        }
                    } else {
                        // 如果url参数中没有城区信息，不需要做额外处理，直接遍历展示到页面中
                        for (var i = 0; i < data.data.length; i++) {
                            $(".filter-area").append('<li area-id="' + data.data[i].id + '">' + data.data[i].name + '</li>');
                        }
                    }
                    // 在页面添加好城区选项信息后，更新展示房屋列表信息
                    updateHouseData("renew");
                    // 获取页面显示窗口的高度
                    var windowHeight = $(window).height();
                    // 为窗口的滚动添加事件函数
                    window.onscroll = function () {
                        // var a = document.documentElement.scrollTop==0? document.body.clientHeight : document.documentElement.clientHeight;
                        var b = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
                        var c = document.documentElement.scrollTop == 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
                        // 如果滚动到接近窗口底部
                        if (c - b < windowHeight + 50) {
                            // 如果没有正在向后端发送查询房屋列表信息的请求
                            if (!house_data_querying) {
                                // 将正在向后端查询房屋列表信息的标志设置为真，
                                house_data_querying = true;
                                // 如果当前页面数还没到达总页数
                                if (cur_page < total_page) {
                                    // 将要查询的页数设置为当前页数加1
                                    next_page = cur_page + 1;
                                    // 向后端发送请求，查询下一页房屋数据
                                    updateHouseData();
                                } else {
                                    house_data_querying = false;
                                }
                            }
                        }
                    }
                }
            });

            $(".input-daterange").datepicker({
                format: "yyyy-mm-dd",
                startDate: "today",
                language: "zh-CN",
                autoclose: true
            });
            var $filterItem = $(".filter-item-bar>.filter-item");
            $(".filter-title-bar").on("click", ".filter-title", function (e) {
                var index = $(this).index();
                if (!$filterItem.eq(index).hasClass("active")) {
                    $(this).children("span").children("i").removeClass("fa-angle-down").addClass("fa-angle-up");
                    $(this).siblings(".filter-title").children("span").children("i").removeClass("fa-angle-up").addClass("fa-angle-down");
                    $filterItem.eq(index).addClass("active").siblings(".filter-item").removeClass("active");
                    $(".display-mask").show();
                } else {
                    $(this).children("span").children("i").removeClass("fa-angle-up").addClass("fa-angle-down");
                    $filterItem.eq(index).removeClass('active');
                    $(".display-mask").hide();
                    updateFilterDateDisplay();
                }
            });
            $(".display-mask").on("click", function (e) {
                $(this).hide();
                $filterItem.removeClass('active');
                updateFilterDateDisplay();
                cur_page = 1;
                next_page = 1;
                total_page = 1;
                updateHouseData("renew");

            });
            $(".filter-item-bar>.filter-area").on("click", "li", function (e) {
                if (!$(this).hasClass("active")) {
                    $(this).addClass("active");
                    $(this).siblings("li").removeClass("active");
                    $(".filter-title-bar>.filter-title").eq(1).children("span").eq(0).html($(this).html());
                } else {
                    $(this).removeClass("active");
                    $(".filter-title-bar>.filter-title").eq(1).children("span").eq(0).html("位置区域");
                }
                
                $(this).addClass("active");
                $(this).siblings("li").removeClass("active");
                $(".filter-title-bar>.filter-title").eq(1).children("span").eq(0).html($(this).html());
                $(".display-mask").trigger("click");
            });
            $(".filter-item-bar>.filter-sort").on("click", "li", function (e) {
                if (!$(this).hasClass("active")) {
                    $(this).addClass("active");
                    $(this).siblings("li").removeClass("active");
                    $(".filter-title-bar>.filter-title").eq(2).children("span").eq(0).html($(this).html());

                    $(".display-mask").trigger("click");
                }
            })
        })
    </script>
</body>

</html>